<template>
	<view v-if="dataInfo">
		<view class="wrap paddingBottom flex column">
			<view class="wrap-order-status flex align-center">
				<view class="status">
					订单状态：{{ onGetStatus() }}
				</view>
			</view>
			
			<view class="wrap-receive-address" v-if="dataInfo.delivery_type == 'express' && dataInfo.address !== null">
				<view class="address-title">
					收货地址
				</view>
				
				<view class="address-info flex align-center">
					<image
						class="img"
						:src="$staticImagePath('order/address.png')"
					/>
					
					<view class="address-right flex column">
						<view class="name-phone flex align-center">
							<view class="name limit-num-line">
								{{ dataInfo.address.name }}
							</view>
							
							<view class="phone">
								{{ dataInfo.address.mobile }}
							</view>
						</view>
						
						<view class="address">
							{{ dataInfo.address.address }}{{ dataInfo.address.address_name }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="wrap-user-info">
				<view class="user-title">
					买家信息
				</view>
					
				<view class="user-info flex align-center">
					<image
						class="avatar"
						:src="$wanlshop.oss(dataInfo.user_info.avatar)"
					/>
					
					<view class="user-name">
						{{ dataInfo.user_info.nickname }}
					</view>
				</view>
			</view>
			
			<view class="wrap-goods-info">
				<view class="goods-title">
					商品信息
				</view>
				
				<view class="goods-list">
					<block v-for="(item, index) in dataInfo.goods" :key="index">
						<view class="goods-item flex align-center">
							<view class="file">
								<image class="img" :src="$wanlshop.oss(item.image)" />
							</view>
							
							<view class="right flex column just-between">
								<view class="goods-name limit-num-line">
									{{ item.title }}
								</view>
								
								<view class="attr">
									{{ item.difference }}
								</view>
								
								<view class="price-num flex align-center just-between">
									<view class="price">
										￥{{ item.price }}
									</view>
									
									<view class="num">
										x{{ item.number }}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="wrap-order-info">
				<view class="order-title">
					订单信息
				</view>
				
				<view class="order-list flex column">
					<view class="order-item flex align-center">
						<view class="left">
							订单编号:
						</view>
						
						<view class="right">
							{{ dataInfo.order_no }}
						</view>
					</view>
					
					<view class="order-item flex align-center">
						<view class="left">
							支付交易号:
						</view>
						
						<view class="right" v-if="dataInfo.pay !== null">
							{{ dataInfo.pay.pay_no }}
						</view>
					</view>
					
					<view class="order-item flex align-center">
						<view class="left">
							创建时间:
						</view>
						
						<view class="right">
							{{ dataInfo.createtime_text }}
						</view>
					</view>
					
					<view class="order-item flex align-center" v-if="dataInfo.state > 1">
						<view class="left">
							付款时间:
						</view>
						
						<view class="right">
							{{ dataInfo.paymenttime_text }}
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<wrapFooterVue v-if="onShowBtnBg(dataInfo)" bgColor="#FFFFFF">
			<view class="wrap-footer-content flex align-center just-end">
				<block v-if="dataInfo.is_refund == 1">
					<view class="btn one" @click.stop="onRefuseRefund()">
						拒绝
					</view>
					
					<view class="btn two" @click.stop="onAgreeRefund()">
						同意
					</view>
				</block>
				
				<block v-else>
					<view class="btn one"
						v-if="dataInfo.state == 2"
						@click.stop="onRefund()"
					>
						退款
					</view>
					
					<view v-if="dataInfo.delivery_type === 'express' && dataInfo.state == 2" class="btn two"
						@click.stop="onSend()"
					>
						发货
					</view>
				</block>
			</view>
		</wrapFooterVue>
		
		<refuseRefundPopupVue
			:isShow.sync="isShowRefusePopup"
			:orderID="dataInfo.refund.id"
			@onRefunse="getDetailData()"
		/>
	</view>
</template>

<script>
	import { GetOrderDetails, AgreeAfterService } from "@/utils/API.js";
	import refuseRefundPopupVue from "../components/popupContent/refuseRefundPopup.vue";
	import wrapFooterVue from "../components/footer/footer.vue";
	
	export default {
		components: {
			refuseRefundPopupVue,
			wrapFooterVue,
		},
		data() {
			return {
				orderID: "", //订单ID
				
				dataInfo: null, //订单详情
				isShowRefusePopup: false,
			};
		},
		onLoad(options) {
			if (options.hasOwnProperty("id")) {
				this.orderID = options.id;
			}
		},
		onShow() {
			this.getDetailData();
		},
		methods: {
			/**
			 * 获取订单状态
			 */
			onGetStatus() {
				const item = this.dataInfo;
				var text = "";
				
				var twoText = "待发货";
				if (item.delivery_type === "express") {
					twoText = "待发货";
				} else if (item.delivery_type === "pickup") {
					twoText = "待核销";
				}
				
				if (item.state == -1) {
					text = "待付款"
				} else {
					text = ["", "待付款", twoText, "待收货", "待评论", "", "已完成", "已取消", "", "", "", ""][item.state];
				}
				return text;
			},
			/**
			 * 是否显示按钮
			 */
			onShowBtnBg(item) {
				var isShow = false;
				
				if (item.state == 2) {
					isShow = true;
				}
				if (item.is_refund == 1) {
					isShow = true;
				}
				
				return isShow;
			},
			/**
			 * 退款
			 */
			onRefund() {
				this.$wanlshop.to(`/pages/new/applyRefund/applyRefund?id=${this.orderID}`);
			},
			/**
			 * 发货
			 */
			onSend() {
				this.$wanlshop.to(`/pages/new/sendGoods/sendGoods?id=${this.orderID}`);
			},
			/**
			 * 同意
			 */
			onAgreeRefund(item) {
				uni.showModal({
					title: "提示",
					content: "确定同意售后吗?",
					success: res => {
						if (res.confirm) {
							this.agreeRefundData();
						}
					}
				})
			},
			agreeRefundData() {
				this.$throttle(() => {
					AgreeAfterService(this.dataInfo.refund.id).then(res => {
						this.$st.success("售后成功", () => {
							this.onRefresh();
						})
					})
				})
			},
			/**
			 * 拒绝
			 */
			onRefuseRefund() {
				this.isShowRefusePopup = true;
			},
			
			/**
			 * 网络请求
			 */
			getDetailData() {
				GetOrderDetails(this.orderID).then(res => {
					this.dataInfo = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		--bottom-height: 140rpx;
		box-sizing: border-box;
		gap: 20rpx;
		
		.wrap-order-status {
			width: 100%;
			padding: 30rpx;;
			background-color: white;
			box-sizing: border-box;
			overflow: hidden;
			
			.status {
				color: #3D3D3D;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		
		.wrap-receive-address {
			width: 100%;
			background-color: white;
			padding: 30rpx;
			box-sizing: border-box;
			overflow: hidden;
			
			.address-title {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			
			.address-info {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
				gap: 30rpx;
				
				.img {
					width: 54rpx;
					height: 54rpx;
				}
				
				.address-right {
					flex: 1;
					overflow: hidden;
					gap: 10rpx;
					
					.name-phone {
						width: 100%;
						overflow: hidden;
						gap: 15rpx;
						
						.name {
							--limit-num: 1;
							color: #333333;
							font-size: 30rpx;
						}
						
						.phone {
							flex-shrink: 0;
							color: #666666;
							font-size: 26rpx;
						}
					}
					.address {
						line-height: 1.5;
						color: #333333;
						font-size: 30rpx;
					}
				}
			}
		}
		
		.wrap-user-info {
			width: 100%;
			overflow: hidden;
			background-color: white;
			padding: 30rpx;
			box-sizing: border-box;
			
			
			.user-title {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			
			.user-info {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
				gap: 20rpx;
				
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
					overflow: hidden;
				}
				
				.user-name {
					color: #333333;
					font-size: 30rpx;
				}
			}
		}
		
		.wrap-goods-info {
			width: 100%;
			overflow: hidden;
			background-color: white;
			padding: 30rpx;
			box-sizing: border-box;
			
			.goods-title {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			
			.goods-list {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
				
				.goods-item {
					width: 100%;
					overflow: hidden;
					margin-bottom: 30rpx;
					gap: 20rpx;
					
					&:last-child {
						margin-bottom: 0rpx;
					}
					
					.file {
						width: 130rpx;
						height: 130rpx;
						border-radius: 16rpx;
						overflow: hidden;
						
						.img {
							width: 100%;
							height: 100%;
						}
					}
					
					.right {
						flex: 1;
						height: 130rpx;
						overflow: hidden;
						
						.goods-name {
							--limit-num: 1;
							color: #333333;
							font-size: 26rpx;
						}
						
						.attr {
							color: #666666;
							font-size: 26rpx;
						}
						
						.price-num {
							width: 100%;
							overflow: hidden;
							
							.price {
								color: #FF0000;
								font-size: 33rpx;
								font-weight: bold;
							}
							
							.num {
								color: #999999;
								font-size: 30rpx;
							}
						}
					}
				}
			}
		}
		
		.wrap-order-info {
			width: 100%;
			overflow: hidden;
			background-color: white;
			padding: 30rpx;
			box-sizing: border-box;
			
			.order-title {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			
			.order-list {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
				gap: 20rpx;
				
				.order-item {
					width: 100%;
					overflow: hidden;
					
					.left {
						width: 160rpx;
						color: #666666;
						font-size: 28rpx;
					}
					
					.right {
						flex: 1;
						overflow: hidden;
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	
	
	.wrap-footer-content {
		width: 100vw;
		height: 120rpx;
		overflow: hidden;
		padding: 0rpx 37rpx;
		box-sizing: border-box;
		gap: 20rpx;
		
		.btn {
			width: 150rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			overflow: hidden;
			border-radius: 30rpx;
			font-size: 24rpx;
		}
		
		.one {
			color: #333333;
			border: 2rpx solid #DBDBDB;
		}
		
		.two {
			color: white;
			background-color: #84BD00;
		}
	}
</style>
